<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('处理信件工单初稿')"/>
    <!--<th:block th:include="include :: select2-css" />-->
    <link th:href="@{/ajax/libs/bootstrap-switch/bootstrap-switch.min.css}" rel="stylesheet">
    <link th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet">
    <link th:href="@{/ajax/libs/bootstrap-tagsinput/tagsinput.css}" rel="stylesheet">
    <link th:href="@{/ajax/libs/jQuery-ui/jquery-ui.css}" rel="stylesheet">
    <link th:href="@{/css/iconfont/iconfont.css}" rel="stylesheet">
    <link rel="stylesheet" type="text/css" th:href="@{/ajax/libs/qxEasyUI/themes/default/easyui.css}">


</head>
<style>
    .bootstrap-tagsinput > input {
        display: none;
    }

    .tworkformprocess-gjz {
        display: inline-block;
        background-color: #FAFAFA;
        padding: 3px;
        border-radius: 3px;
        margin: 3px;
    }

    label {
        font-weight: bold;
    }

    @font-face {
        font-family: 'huawen';
        src: url("/fonts/huawen.woff2");
    }
    .add-wfTag {
        color: #fff;
        background-color: #3e94c3;
        border-color: #12a1d5;
    }
    .commonTag {
        margin: 5px;
        cursor: pointer;
    }
</style>

<body style="background-color: #F4F6FA; font-size: 13px;font-family:'huawen' ;font-weight: bold">
<div class="main-content" style="margin: 0;padding: 0;letter-spacing:2px;">

    <form id="form-user-add" th:object="${workFormBase}" class="form-horizontal" style="background-color: #F4F6FA">
        <input type="hidden" name="fromTel" th:field="*{fromTel}">
        <input type="hidden" name="fromName" th:field="*{fromName}">
        <input type="hidden" id="pkId" name="pkId" th:field="*{pkId}">
        <input type="hidden" id="originFK" name="originFK" th:field="*{originFK}">

        <div class="col-sm-12" style="display: flex;justify-content: center">
            <!--     左       -->
            <div class="col-sm-8 entering-page">
                <!--内上-->
                <div class="col-sm-12" style="margin-top: 10px;margin-bottom: 25px;">
                    <!--来电类容-->
                    <div class="col-sm-12 tltieBoder">
                        <div class="blueBorder"></div>
                        <h4 style="margin:0 0 0 10px">来信内容</h4>
                    </div>
                    <div id="fmContent"
                         style="padding: 5px;background-color: #FAFAFA;border-radius: 12px; height: 100px">
                        &nbsp;&nbsp;&nbsp;&nbsp;[[${mmailGetDeal.fmContent}]]
                    </div>
                    <!--工单内容-->
                    <div class="col-sm-12 tltieBoder">
                        <div class="blueBorder"></div>
                        <h4 style="margin:0 0 0 10px">回复内容</h4>
                    </div>
                    <div id="fmContent"
                         style="padding: 5px;background-color: #FAFAFA;border-radius: 12px; height: 100px;">
                        &nbsp;&nbsp;&nbsp;&nbsp;[[${workFormBase.DOverDesc}]]
                    </div>
                </div>
                <!--内左-->
                <div class="col-sm-6">
                    <!--   来信基本信息     -->
                    <div class="col-sm-12 tltieBoder">
                        <div class="blueBorder"></div>
                        <h4 style="margin:0 0 0 10px">来信基本信息 <a th:if="${mmailGetDeal.yspare != null && #strings.length(mmailGetDeal.yspare) > 10}" class="btn btn-sm btn-primary" onclick="lookImage(this)">查看图片</a></h4>
                        <div style="margin-left: 20px;">
                            <button type="button" class="btn btn-sm add-wfTag" onclick="makeTag()">打标签
                            </button>
                        </div>
                    </div>
                    <!--该工单标签-->
                    <div class="col-sm-12">
                        <div class="form-group col-sm-12">
                            <label class="col-sm-4 control-label entering-pd" style="margin-left: -40px;">该工单标签</label>
                            <div class="col-sm-8 card card-body">
                                <th:block th:if="${wfTag} != null" th:each="item : ${wfTag}">
                                    <span class="badge badge-pill badge-light commonTag" th:title="${item['tagName']}" th:value="${item['tagNo']}">[[${item['tagName']}]]</span>
                                </th:block>
                            </div>
                        </div>
                    </div>
                    <!--事发地址-->
                    <div class="form-group col-sm-12">

                        <label class="col-sm-3 control-label  entering-pd">事发地址：</label>
                        <div class="col-sm-9">
                            <span class="tworkformprocess-span">[[*{fmAddress}]]</span>
                        </div>


                    </div>

                    <div class="form-group col-sm-12">
                        <label class="col-sm-3  control-label entering-pd">流水号&nbsp;&nbsp;：</label>
                        <div class="col-sm-9">
                            <span class="tworkformprocess-span">[[*{wsCode}]]</span>
                        </div>
                    </div>
                    <div class="form-group col-sm-12">
                        <label class="col-sm-3 control-label entering-pd">提取码&nbsp;&nbsp;：</label>
                        <div class="col-sm-9">

                            <span class="tworkformprocess-span">[[*{wsKey}]]</span>
                        </div>
                    </div>

                    <div class="form-group col-sm-12">
                        <label class="col-sm-3 control-label entering-pd">投诉人电话：</label>
                        <div class="col-sm-9">
                            <span class="tworkformprocess-span">[[*{fromTel}]]</span>
                        </div>
                    </div>
                    <div class="form-group col-sm-12">
                        <label class="col-sm-3 control-label entering-pd">工单编号：</label>
                        <div class="col-sm-9">
                            <span class="tworkformprocess-span">[[*{workFormNo}]]</span>
                        </div>
                    </div>
                    <div class="form-group col-sm-12">
                        <label class="col-sm-3 control-label entering-pd">工单性质：</label>
                        <div class="col-sm-9">
                            <select name="setProId" id="workCharacter" class="form-control m-b phoneCategory"
                                    style="display: none">
                                <option value="">-请选择-</option>
                                <option value="11" selected>普通工单</option>
                                <option value="21">督办工单</option>
                                <option value="31">呈批工单</option>
                            </select>
                            <input name="setProName" value="普通工单" type="hidden">
                            <span class="tworkformprocess-span" id="workCharac"></span>
                        </div>
                    </div>

                    <!--单选-->
                    <div class="form-group col-sm-12" style="line-height: 8px;margin-top: 8px;">
                        <label class="col-sm-3 control-label entering-pd" style="padding-top: 1px">重复来信：</label>
                        <div class="col-sm-3">
                            <span th:text="${mmailGetDeal != null ? mmailGetDeal.repeatFlag == 5 ? '是' : '否' : '否'}"></span>
                        </div>
                        <label class="col-sm-3 control-label entering-pd" style="padding-top: 1px">建议公开：</label>
                        <div class="col-sm-3">
                            <span th:text="${mmailGetDeal != null ? mmailGetDeal.openX == 1 ? '是' : '否' : '否'}"></span>
                        </div>
                    </div>
                    <div class="form-group col-sm-12" style="margin-bottom: 0px">
                        <label class="col-sm-3 control-label entering-pd" style="padding-top: 1px">同意公开：</label>
                        <div class="col-sm-3">
                            <span th:text="${mmailGetDeal != null ? mmailGetDeal.openFrom == 1 ? '是' : '否' : '否'}">否</span>
                        </div>

                        <label class="col-sm-3 control-label entering-pd" style="padding-top: 1px">性别：</label>
                        <div class="col-sm-3">
                            <span th:text="${mmailGetDeal != null ? mmailGetDeal.fromSex == 1 ? '男' : '女' : '否'}">否</span>
                        </div>
                    </div>
                </div>
                <!--内右-->
                <div class="col-sm-6" style="border-left: 1px solid #ebebeb">

                    <!--   工单基本信息     -->
                    <div class="col-sm-12 " style="display: flex;justify-content: space-between">
                        <div class="tltieBoder">
                            <div class="blueBorder"></div>
                            <h4 style="margin:0 0 0 10px">工单基本信息</h4>
                        </div>
                        <!--呈批-->
                        <!--                            <div class="col-sm-6 control-label">-->
                        <!--                                <button type="button" class="btn btn-sm btn-primary"-->
                        <!--                                        style="margin-top: 9px;color: #206ef7;background-color: white"-->
                        <!--                                        onclick="">呈批-->
                        <!--                                </button>-->
                        <!--                            </div>-->
                    </div>

                    <div class="form-group col-sm-12">
                        <label class="col-sm-3 control-label  entering-pd">来信类型：</label>
                        <div class="col-sm-9">
                            <select name="dfmClaNo" id="dfmClaNo" required
                                    th:with="telTypes=${@commonServiceImpl.findTelType()}"
                                    onchange="dropChgSendTextOnly(this,'dfmClaName');"
                                    class="form-control formSelect">
                                <option value="">--请选择--</option>
                                <th:block th:each="item : ${telTypes}">
                                    <option th:text="${item['CSText']}" th:value="${item['CSValue']}"
                                            th:selected="${item['CSValue'] eq workFormBase.dfmClaNo}"></option>
                                </th:block>
                            </select>
                            <input type="hidden" name="dfmClaName" id="dfmClaName" th:value="*{dfmClaName}"/>
                        </div>
                    </div>
                    <!--内容类别-->
                    <div class="form-group col-sm-12">
                        <label class="col-sm-3 control-label entering-pd">内容类别：</label>
                        <div class="col-sm-9">
                            <input id="qxCT" th:value="*{dcntAName}" style="width:242px;height:31px;">
                            <input id="txtDcntAcode" name="dcntACode" type="hidden" th:value="*{dcntACode}"/>
                            <input id="txtDCntAName" name="dcntAName" type="hidden" th:value="*{dcntAName}"/>
                        </div>
                    </div>
                    <!--工单主题-->
                    <div class="form-group col-sm-12">
                        <label class="col-sm-3 control-label entering-pd">工单主题：</label>
                        <div class="col-sm-9">
                            <input id="wsTopic" name="fromTopic" th:field="*{fromTopic}" placeholder="请输入"
                                   class="form-control workTheme" type="text"
                                   required="">
                        </div>
                    </div>
                    <!--拟办期限-->
                    <div class="form-group col-sm-12">
                        <label class="col-sm-3 control-label  entering-pd">拟办期限：</label>
                        <div class="col-sm-9">
                            <input name="deadline" th:field="*{wfLimit}" placeholder="请输入"
                                   class="form-control deadline"
                                   type="text"
                                   required="">
                        </div>
                        <div class="input-group-append " style="position: absolute;top: 10px;right: 40px;">
                            <span class="glyphicon glyphicon-calendar "></span>
                        </div>
                    </div>

                    <!-- 工单备注-->
                    <div class="form-group col-sm-12">
                        <label class="col-xs-3 control-label entering-pd">工单备注：</label>
                        <div class="col-xs-9">
                                    <textarea name="wfRemark" maxlength="3500" class="form-control workRemark"
                                              rows="3" style="height: 100px"></textarea>
                            <span class="tworkformprocess-span">还可以输入<i class="workRemarkI">3500</i>个文字</span>
                        </div>
                    </div>
                    <!-- 单选-->
                    <div class="col-sm-12">
                        <label class="col-sm-3 control-label entering-pd" style="padding-top: 1px">重复来信：</label>
                        <div class="col-sm-3">
                            <span th:text="${workFormBase != null ? workFormBase.reportFlag == 1 ? '是' : '否' : '否'}"></span>
                        </div>
                    </div>


                </div>
            </div>
            <div style="position: fixed;top: 3%;right: 9%;">
                <div class="treturnReason_imgbox">
                    <img class="treturnReason_img treturnReason_img-top" th:src="@{/img/label_yellow.png}">
                    <div onclick="callbackRecord()"
                         class="treturnReason_Record treturnReason_Record-box treturnReason_Record-box-top">回访记录
                    </div>
                </div>
                <div class="treturnReason_imgbox">
                    <img class="treturnReason_img treturnReason_img-bottom" th:src="@{/img/label_yellow.png}">
                    <div onclick="operatingRecord()"
                         class="treturnReason_Record treturnReason_Record-box treturnReason_Record-box-bottom">操作记录
                    </div>
                </div>
                <div class="treturnReason_imgbox">
                    <img class="treturnReason_img treturnReason_img-bottom" th:src="@{/img/label_yellow.png}">
                    <div onclick="operationSendBackRecord()"
                         class="treturnReason_Record treturnReason_Record-box treturnReason_Record-box-bottom">办理情况
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-12 entering-bt" style="justify-content: center;">
            <button type="button" class="btn btn-sm btn-warning" onclick="gclose()">关闭</button>&nbsp;
        </div>
    </form>
</div>
<input type="hidden" id="ySpare" name="ySpare" th:value="${mmailGetDeal?.yspare}" />
<input type="hidden" id="wsCode" name="wsCode" th:value="${mmailGetDeal?.wsCode}" />
<script th:src="@{/ajax/libs/layui/laydate.js}"></script>
<th:block th:include="include :: footer"/>
<script th:src="@{/ajax/libs/bootstrap-tagsinput/tagsinput.min.js}"></script>
<script th:src="@{/ajax/libs/bootstrap-switch/bootstrap-switch.min.js}"></script>
<script th:src="@{/ajax/libs/jQuery-ui/jquery-ui.js}"></script>
<script th:src="@{/ajax/libs/qxEasyUI/jquery.easyui.min.js}"></script>
<script th:src="@{/js/tworkformadd.js}"></script>
<script th:src="@{/js/mailorder.js}"></script>
<script th:src="@{/js/teladd.js}"></script>


<script>
    //回访记录
    function callbackRecord(){
        var url = '/system/mMailWF/forShow/judgeList/'+$("#pkId").val();
        var title = '回访记录';

        var width="80%";
        var options = {
            url: url,
            title: title,
            width:width,
            skin: 'layui-layer-gray',
            btn: ['关闭'],
            yes: function (index, layero) {
                $.modal.close(index);
            }
        }
        $.modal.openOptions(options);
    }
    //操作记录
    function operatingRecord(){
        var url = '/system/mMailWF/forShow/logList/'+$("#pkId").val();
        var title = '操作记录';
        var width = "80%";
        var options = {
            url: url,
            title: title,
            width:width,
            skin: 'layui-layer-gray',
            btn: ['关闭'],
            yes: function (index, layero) {
                $.modal.close(index);
            }
        }
        $.modal.openOptions(options);
    }
    // 派单记录
    function operationSendBackRecord(){
        var wfId = $('#pkId').val();
        var url = '/system/wsMail/simulacrumList/' + wfId;
        var title = '办理情况';
        var width = "80%";
        var options = {
            url: url,
            title: title,
            width: width,
            skin: 'layui-layer-gray',
            btn: ['关闭'],
            yes: function (index, layero) {
                $.modal.close(index);
            }
        }
        $.modal.openOptions(options);
    }
    //被诉主体
    var bslength = ['拼汐汐', '某东', '某宝', '某猫'];
    var bsHtml = '';
    for (let i = 0; i < bslength.length; i++) {
        bsHtml += '<div class="tworkformprocess-gjz">' + bslength[i] + '</div>'
    }
    $("#tworkformprocess-zt").html(bsHtml);
    //关键字
    var gjzlength = ['拼汐汐', '某东', '某宝', '某猫'];
    var gjzHtml = '';
    for (let i = 0; i < gjzlength.length; i++) {
        gjzHtml += ' <div class="tworkformprocess-gjz">' + gjzlength[i] + '</div>'
    }
    $("#tworkformprocess-bq").html(gjzHtml);
    //    var dfmClaNo = $('#dfmClaNo option:selected').text();
    //    $('#dfmCla').text(dfmClaNo)
    //Bootstrap-switch单选按钮操作
    var workCharacter = $('#workCharacter option:selected').text();
    $('#workCharac').text(workCharacter)
    $('[name="suggest"]').bootstrapSwitch({
        onText: "是",
        offText: "否",
        onColor: "success",
        offColor: "info",
        size: "mini",
        onSwitchChange: function (event, state) {
            alert('切换' + state);
        }

    })
    $('[name="supervise"]').bootstrapSwitch({
        onText: "是",
        offText: "否",
        onColor: "success",
        offColor: "info",
        size: "mini",
        onSwitchChange: function (event, state) {
            alert('切换' + state);
        }

    })
    $('[name="project"]').bootstrapSwitch({
        onText: "是",
        offText: "否",
        onColor: "success",
        offColor: "info",
        size: "mini",
        onSwitchChange: function (event, state) {
            alert('切换' + state);
        }

    })
    $('[name="extract"]').bootstrapSwitch({
        onText: "是",
        offText: "否",
        onColor: "success",
        offColor: "info",
        size: "mini",
        onSwitchChange: function (event, state) {
            alert('切换' + state);
        }

    })
    //Bootstrap-switch单选按钮赋值
    var r = true;
    $('[name="shieldPhone"]').bootstrapSwitch({
        onText: "是",
        offText: "否",
        onColor: "success",
        offColor: "info",
        size: "mini",
        state: r,
        onSwitchChange: function (event, state) {
            alert('切换' + state);
        }

    })
    $('[name="open"]').bootstrapSwitch({
        onText: "是",
        offText: "否",
        onColor: "success",
        offColor: "info",
        size: "mini",
        state: r,
        onSwitchChange: function (event, state) {
            alert('切换' + state);
        }

    })
    $('[name="repetition"]').bootstrapSwitch({
        onText: "是",
        offText: "否",
        onColor: "success",
        offColor: "info",
        size: "mini",
        state: r,
        onSwitchChange: function (event, state) {
            alert('切换' + state);
        }

    })
    $('[name="relation"]').bootstrapSwitch({
        onText: "是",
        offText: "否",
        onColor: "success",
        offColor: "info",
        size: "mini",
        state: r,
        onSwitchChange: function (event, state) {
            alert('切换' + state);
        }

    })
    var a = $('#fmContent').text();
    $.ajax({
        url: "/api/bd/recommend",
        data: {title: '', content: a},
        type: "POST",
        dataType: "json",
        beforeSend: function () {
            $('#loading').modal('show');
        },
        complete: function () {
            $('#loading').modal('hide');
        },
        success: function (data) {
            // data = jQuery.parseJSON(data);  //dataType指明了返回数据为json类型，故不需要再反序列化
            var contentObj = document.getElementsByClassName("content")[0];
            if (data.data.length == 0) {
                contentObj.innerHTML = '没有数据';
            } else {
                var isHtml = "";
                var arr = data.data;

                for (var i = 0; i < data.data.length; i++) {
                    //       console.log(arr[i])
                    isHtml += '<div class="col-sm-12 work-box">';
                    isHtml += '<div class="work-box-top">';
                    isHtml += '<div class="col-sm-12 work-box-top-box">';
                    isHtml += '<div class="col-sm-6"><a  class="work-box-a" ><span style="">' + arr[i].title + '</span></a></div>';
                    isHtml += '<div class="col-sm-6 control-label" style="display: flex;align-items: center;padding: 0;justify-content: flex-end">';
                    isHtml += '<button type="button" class="btn btn-sm btn-primary" style="color: #206ef7;background-color: white;margin-right: 15px;">流程中';
                    isHtml += '</button>';
                    isHtml += '<i class="fa fa-chevron-circle-right"></i>';
                    isHtml += '</div>';
                    isHtml += '</div>';
                    isHtml += '<div class="col-sm-12 work-box-class">' + arr[i].content + '</div>';
                    isHtml += '<div class="col-sm-12 work-box-buttom">';
                    // isHtml += '<div class="col-sm-6">' + arr[i].subject + '</div>';
                    isHtml += '<div class="col-sm-8">' + arr[i].publish_time + '</div>';
                    isHtml += '<div class="col-sm-4">';
                    isHtml += '<div class="work-buttom control-label" style="margin: 0;padding: 0" onclick="copy(' + '\'' + arr[i].id + '\'' + ')">一键复制</div>';
                    isHtml += '</div>';
                    isHtml += '</div>';
                    isHtml += '</div>';
                    isHtml += '</div>';
                }
                ;
                contentObj.innerHTML = isHtml;
            }

        }

    });

    var prefix = ctx + "system/mTelRcd";
    var send = ctx + "system/sendBack";
    var work = ctx + "system/workForm";


    $('#qxCT').combotree({
        url: '/system/common/findContentCate',
        required: false,
        onSelect: function (record) {
            $("#txtDcntAcode").val(record.id);
            $("#txtDCntAName").val(record.text);
            var dfmClaName = $("#dfmClaNo option:selected").text();
            var fromName = $("#fromName").val();
            $("#wsTopic").val(fromName + '[' + record.text + ']' + dfmClaName);
        }
    });



    $('#dfmClaNo').change(function () {
        var dfmClaName = $("#dfmClaNo option:selected").text();
        var txtDCntAName = $("#txtDCntAName").val();
        var fromName = $("#fromName").val();
        $("#wsTopic").val(fromName + '[' + txtDCntAName + ']' + dfmClaName);
    })

    // 添加工单标签
    function makeTag(){
        var mailId = $("#originFK").val();
        var url = ctx+"system/tag/addMailWFTag?mailId=" + mailId;
        var title = "添加工单标签";
        $.modal.open(title,url, '800', '500',callback);
    }
    // 刷新当前页面
    function callback(index, layero){
        var iframeWin = layero.find('iframe')[0];
        iframeWin.contentWindow.submitHandler();
    }

</script>
</body>
</html>

